<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>Dom及其操作</title>
     <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
     <pre>
        <code style='max-height: 400px;'>
            // 获取元素的几种方法
            // document.getElementById()  // 根据id  为什么？因为id是全文中唯一的
            // [context].getElementsByTagName() // 通过标签名获取一组元素的集合
            // ie6-8不支持 [context].getElementsByClassName //在指定容器上下文中通过元素类名获取一组元素的集合
            // [context].getElementsByName() // 在指定容器 根据name获取元素的节点集合 一般只应用于表单元素的处理 
            // document.head / document.body / document.documentElement / document.title
            // 获取文档的head 获取文档的body 获取文档 获取文档的标题

            // 获取类名为className的元素 id同理
            // document.querySelector('.className | #id')
            // 获取集合
            // document.querySelectorAll('')
            // 后代选择器 获取#box 下面的所有a
            // document.querySelector('#box a')
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        // 获取元素的几种方法
        // document.getElementById()  // 根据id  为什么？因为id是全文中唯一的
        // [context].getElementsByTagName() // 通过标签名获取一组元素的集合
        // ie6-8不支持 [context].getElementsByClassName //在指定容器上下文中通过元素类名获取一组元素的集合
        // [context].getElementsByName() // 在指定容器 根据name获取元素的节点集合 一般只应用于表单元素的处理 
        // document.head / document.body / document.documentElement / document.title
        // 获取文档的head 获取文档的body 获取文档 获取文档的标题

        // 获取类名为className的元素 id同理
        // document.querySelector('.className | #id')
        // 获取集合
        // document.querySelectorAll('')
        // 后代选择器 获取#box 下面的所有a
        // document.querySelector('#box a')
     </script>
</body>
</html>